<template>
  <div class="play-box">
    <div class="title">{{ renderData.playTypeName }}</div>
    <subGameVav :data="renderData.lotteryPlayTypeList" @selectPlayType="selectPlayType" />
    <div class="game-nav-underline" />
    <div class="play-odds">
      <BUTTON
        v-for="(numItem, index) in renderData.lotteryPlayTypeList[currentPlayTypeIndex].cachePlayList"
        @selectOdds="selectNumber(numItem, renderData.lotteryPlayTypeList[currentPlayTypeIndex].playTypeName)"
        :data="{ number: numItem.playName, odds: numItem.odds, maxOdds: numItem.maxOdds, color: numItem.color }"
        :key="index"
        :class="{ selected: getSelectNumOddsList.includes(numItem) }"
      />
    </div>
  </div>
</template>

<script>
import BUTTON from './odds-btn.vue'
import subGameVav from './sub-game-nav.vue'
import mixin from '@/mixin/xglhc-mixin.js'
import { showToast } from 'vant'
import { EM_RULE_LIST, NUMBER_CLR_MAP } from '@/components/game/xglhc/xglhc-constant'

export default {
  components: { BUTTON, subGameVav },
  mixins: [mixin],
  props: { renderData: {} },
  computed: {
    currentSubName() {
      return this.renderData.lotteryPlayTypeList[this.currentPlayTypeIndex].playTypeName
    },
  },
  watch: {
    currentList: {
      handler(list) {
        list.forEach((item) => NUMBER_CLR_MAP[item.playName] && (item['color'] = NUMBER_CLR_MAP[item.playName]))
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // em | 两面 校验 规则
    emCheckRules({ playCode }) {
      if (this.currentSubName !== '两面') return null
      const set = new Set([...this.getSelectNumOddsList.map((item) => item.playCode), playCode])
      const tip = EM_RULE_LIST.find(({ list }) => list.every((code) => set.has(code)))?.tip
      tip && showToast(tip)
      return tip
    },

    // 选择赔率
    selectNumber(item, preName) {
      // 之前选中的数据
      item.betAmount = this.investStore.getSingleInvestMoney
      item['spliceName'] = `${preName}#${item.playName}`
      if (this.emCheckRules(item)) return
      // 多选的情况
      const index = this.getSelectNumOddsList.findIndex(({ playCode }) => playCode === item.playCode)
      index === -1 ? this.getSelectNumOddsList.push(item) : this.getSelectNumOddsList.splice(index, 1)
      this.notifyParentInvestList(this.getSelectNumOddsList)
    },
  },
}
</script>

<style scoped lang="less">
@import url('./common.less');
</style>
